import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Row,Col,Select,Popover,InputNumber,Checkbox} from 'antd';
import styles from './index.less';
import UPpdateImg from '../../utils/update';
const Option = Select.Option;
const Pages = ({ inspep, dispatch, loading }) => {
    const columns = [
        {
            title: '检查项⽬编号',
            dataIndex: 'item_num',
        },
        {
            title: '检查项⽬名称',
            dataIndex: 'item_name',
        },
        {
            title: '检查项⽬类型',
            dataIndex: 'item_type',
            render:text =>text == '1'?'选择检查':"数字检查",
        },
        {
            title: '是否评分',
            dataIndex: 'item_type1',
            render:text =>text == '1'?'是':"否",
        },
        {
            title: '操作',
            dataIndex: 'option',
            render:(text,record) =>{
                return <div>
                    <a onClick={()=>{
                        dispatch({type:'inspep/goListGAI',payload:{id:record.id}});
                    }}>修改</a>
                    {/*<a onClick={()=>{*/}
                    {/*dispatch({type:'inspep/goList',payload:{id:record.id}});*/}
                    {/*}}>查看</a>*/}
                </div>;
            },
        },
    ];
    return(
        <div>
            {inspep.POSTONEView && <POSTONE dispatch={dispatch} {...inspep} loading={loading.global}/>}
            {inspep.POSTTOWView && <POSTTOW dispatch={dispatch} {...inspep} loading={loading.global}/>}
            {
                (!inspep.POSTONEView && !inspep.POSTTOWView) &&
                <div className={styles.container}>
                    <PagesGET dispatch={dispatch} {...inspep} loading={loading.global}/>
                    <Table
                        columns={columns}
                        size="small"
                        pagination={false}
                        loading={loading.global}
                        rowKey={id=>id.id}
                        dataSource={inspep.getInspepData||null} />
                    {inspep.Pagination && <Pagination current={inspep.pages} showTotal={total => `共计 ${total} 条`}
                        style={{float: 'right', margin: 10}} size="small" total={inspep.total}
                        onChange={pages => { !loading.global && dispatch({type:'inspep/save',payload:{pages:pages}});}}/>}
                </div>
            }

        </div>
    );
};

const POSTONE = (
    {
        dispatch,
        newpostdata,
        item_nameADD,
        is_cal_score,
        maxnum,
        minnum,
        wrong_num,
        correct_num,
        category_id,
        item_explain,
        record,
        loading,
    }
) =>{
    console.log('数字检查',record);
    return <div style={{margin:50,height:'80vh',overflow:'auto'}}>
        <Row>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>检查项目名称:</span>
                <Input style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={e => dispatch({type:"inspep/save",payload:{item_nameADD: e.target.value}})}
                    value={item_nameADD}
                    placeholder="项目名称"/>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>是否计算评分:</span>
                <Select value={is_cal_score || '请选择'}
                    style={{ width: 400, marginBottom: 10, marginTop: -4 ,marginLeft:10}}
                    onChange={value=>{
                        dispatch({type:"inspep/save",payload: {is_cal_score: value}});
                    }}>
                    <Option value='0'>是</Option>
                    <Option value='1'>否</Option>
                </Select>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>合格值的上限:</span>
                <InputNumber style={{width: 120, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={value => dispatch({type:"inspep/save",payload:{maxnum: value}})}
                    value={maxnum}
                    placeholder="合格值上限"/>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>合格值的下限:</span>
                <InputNumber style={{width: 120, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={value => dispatch({type:"inspep/save",payload:{minnum: value}})}
                    value={minnum}
                    placeholder="合格值下限"/>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>合格的评分数:</span>
                <InputNumber style={{width: 120, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={value => dispatch({type:"inspep/save",payload:{correct_num: value}})}
                    value={correct_num}
                    placeholder="合格评分数"/>
            </Col>

            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>不合格的评分:</span>
                <InputNumber style={{width: 120, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={value => dispatch({type:"inspep/save",payload:{wrong_num: value}})}
                    value={wrong_num}
                    placeholder="不合格评分数"/>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>所属项目分类:</span>
                <Select value={category_id || '请选择'}
                    style={{ width: 400, marginBottom: 10, marginTop: -4 ,marginLeft:10}}
                    onChange={value=>{
                        dispatch({type:"inspep/save",payload: {category_id: value}});
                    }}>
                    {
                        newpostdata && newpostdata.map(item=>{
                            return <Option key={item.id} value={item.id}>{item.name}</Option>;
                        })
                    }
                </Select>
            </Col>
            <Col span={3} style={{width:108}}><span style={{marginTop:-20}}><span style={{color:'red'}}>*</span>检查项目说明:</span></Col>
            <Col span={12} style={{width:400}}>
                <Input.TextArea rows={4} style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:-10}}
                    onChange={e => dispatch({type:"inspep/save",payload:{item_explain: e.target.value}})}
                    value={item_explain}
                    placeholder="项目说明"/>
            </Col>

        </Row>
        <Button style={{margin:10}} type='primary' onClick={()=>{
            if (correct_num && maxnum && minnum && wrong_num && item_nameADD && category_id && is_cal_score && item_explain){
                let body = {
                    category_id:category_id,
                    is_cal_score:is_cal_score,
                    item_explain:item_explain,
                    item_name:item_nameADD,
                    correct_num:correct_num,
                    wrong_num:wrong_num,
                    maxnum:maxnum,
                    minnum:minnum,
                    item_type:'2',
                };
                if (!record.id){
                    dispatch({type:"inspep/postInspep",payload:body});
                }else {
                    body.id = record.id;
                    dispatch({type:"inspep/putInspep",payload:body});
                }
            }else {
                message.error('请填写完整！');
            }
        }} loading={loading}>保存</Button>
        <Button onClick={()=>{dispatch({type:"inspep/save",payload:{POSTONEView:false}});}}>取消</Button>
    </div>;
};

const POSTTOW = (
    {
        dispatch,
        newpostdata,
        //数据
        item_nameADD,
        is_cal_score,
        category_id,
        item_explain,
        isnameADD,
        fenshuNUm,
        Checkboxit,
        //数据
        numFrom,
        record,
        loading,
    }) =>{
    console.log('选择检查',record);
    return <div style={{margin:50,height:'72vh',overflow:'auto'}}>
        <Row style={{marginTop:10}}>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>检查项目名称:</span>
                <Input style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}}
                    onChange={e => dispatch({type:"inspep/save",payload:{item_nameADD: e.target.value}})}
                    value={item_nameADD}
                    placeholder="项目名称"/>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>是否计算评分:</span>
                <Select value={is_cal_score || '请选择'}
                    style={{ width: 400, marginBottom: 10, marginTop: -4,marginLeft:10 }}
                    onChange={value=>{
                        dispatch({type:"inspep/save",payload: {is_cal_score: value}});
                    }}>
                    <Option value='0'>是</Option>
                    <Option value='1'>否</Option>
                </Select>
            </Col>
            <Col span={24}>
                <span><span style={{color:'red'}}>*</span>所属项目分类:</span>
                <Select value={category_id || '请选择'}
                    style={{ width: 400, marginBottom: 10, marginTop: -4,marginLeft:10 }}
                    onChange={value=>{
                        dispatch({type:"inspep/save",payload: {category_id: value}});
                    }}>
                    {
                        newpostdata && newpostdata.map(item=>{
                            return <Option key={item.id} value={item.id}>{item.name}</Option>;
                        })
                    }
                </Select>
            </Col>
            <Col span={3} style={{width:108}}><span style={{marginTop:-20}}><span style={{color:'red'}}>*</span>检查项目说明:</span></Col>
            <Col span={12} style={{width:400}}>
                <Input.TextArea rows={4} style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:-10}}
                    onChange={e => dispatch({type:"inspep/save",payload:{item_explain: e.target.value}})}
                    value={item_explain}
                    placeholder="项目说明"/>
            </Col>
        </Row>
        <div style={{width:600,textAlign:"center"}}>
            <div style={{textAlign:"center",fontSize:15,padding:10,background:"#aaaaaa"}}>选择项目明细</div>
            <Row style={{background:"#fff",padding:10}}>
                <Col span={7}>选项名称</Col>
                <Col span={7}>选中分数</Col>
                <Col span={7}>选中合格(默认不合格)</Col>
                <Col span={3}/>
            </Row>
            {
                numFrom.map((item,index)=>{
                    return <Row key={index} style={{background:"#fff",padding:10}}>
                        <Col span={7} style={{paddingLeft:10}}>
                            <Input onChange={e => {
                                isnameADD[index] = e.target.value;
                                dispatch({type:"inspep/save",payload:{isnameADD: isnameADD}});
                            }} value={isnameADD[index]} placeholder="选项名称"/></Col>
                        <Col span={7}>
                            <InputNumber onChange={value => {
                                fenshuNUm[index] = value;
                                dispatch({type:"inspep/save",payload:{fenshuNUm: fenshuNUm}});
                            }} value={fenshuNUm[index]} placeholder="选中分数"/>
                        </Col>
                        <Col span={7}>
                            <Checkbox style={{marginTop:4}} checked={Checkboxit[index]} onChange={(e)=>{
                                Checkboxit[index] = e.target.checked;
                                dispatch({type:"inspep/save",payload:{Checkboxit:Checkboxit}});
                            }}/>
                        </Col>
                        <Col style={{marginTop:4}} span={3}><a onClick={()=>{
                            delete numFrom[index];
                            delete isnameADD[index];
                            delete fenshuNUm[index];
                            delete Checkboxit[index];
                            dispatch({type:'inspep/save',payload:{
                                numFrom:numFrom,
                                isnameADD:isnameADD,
                                fenshuNUm:fenshuNUm,
                                Checkboxit:Checkboxit,
                            }});
                        }}>删除</a></Col>
                    </Row>;
                })
            }
            <Button style={{width:600}} type="dashed" onClick={()=>{
                numFrom.push({});
                dispatch({type:'inspep/save',payload:{numFrom:numFrom}});
            }}>添加项目明细</Button>
        </div>
        <Button style={{margin:10}} type='primary' onClick={()=>{
            if (item_nameADD && category_id && is_cal_score && item_explain){
                let details = [];
                numFrom.map((item,index)=>{
                    if(isnameADD[index] && fenshuNUm[index]){
                        details.push({
                            itemdetailname:isnameADD[index],//名称
                            itemdetailnum:fenshuNUm[index],//分数
                            istrue:Checkboxit[index]?'1':'2',//是否合格
                        });
                        if(numFrom.length -1 == index){
                            let body = {
                                category_id:category_id,
                                is_cal_score:is_cal_score,
                                item_explain:item_explain,
                                item_name:item_nameADD,
                                details:details,
                                item_type:'1',
                            };
                            if (!record.id){
                                dispatch({type:"inspep/postInspep",payload:body});
                            }else {
                                body.id = record.id;
                                dispatch({type:"inspep/putInspep",payload:body});
                            }
                        }
                    }else {
                        message.error('请填写完整！');
                    }
                });
            }else {
                message.error('请填写完整！');
            }
        }} loading={loading}>保存</Button>
        <Button onClick={()=>{dispatch({type:"inspep/save",payload:{POSTTOWView:false}});}}>取消</Button>
    </div>;
};

class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            item_name :"",
        };
    }
    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        if(localStorage.getItem('hrefid')){
            this.props.dispatch({type:"inspep/getInspepTow",payload:{
                p_id:localStorage.getItem('hrefid'),
            }});
        }else {
            this.props.dispatch({type:"inspep/getInspep",payload:{
                item_num: "",
                item_name :"",
                item_type: '',
                pageNumber :1,
                pageSize :10,
            }});
        }
    }

    render (){
        let {pages,dispatch,visible ,record,newpostdata,loading } = this.props;
        const content = (
            <div>
                <p onClick={()=>{
                    dispatch({type: "inspep/goPOSTTOWView"});
                }}>选择检查项</p>
                <p onClick={()=>{
                    dispatch({type: "inspep/goPOSTONEView"});
                }}>数字检查项</p>
            </div>
        );
        return(
            <div className={styles.containerit}>
                <div>
                    <Popover content={content} title="新增检查项类型" placement="bottom" trigger="click">
                        <Button type='primary' style={{margin:10}} onClick={()=> {
                            dispatch({type: "inspep/newpost"});
                        }}>新增检查项</Button>
                    </Popover>
                </div>
                <Input value={this.state.item_name} placeholder="检查项目名称" style={{margin:10,width:256}} onChange={e=>this.setState({item_name:e.target.value})}/>
                {/*<Input value={this.state.item_num} placeholder="编号" style={{margin:10,width:256}} onChange={e=>this.setState({item_num:e.target.value})} />*/}
                {/*<Input value={this.state.item_type} placeholder="类型" style={{margin:10,width:256}} onChange={e=>this.setState({item_type:e.target.value})} />*/}
                <Button type='primary' onClick={()=>{
                    dispatch({type:"inspep/getInspep",payload:{
                        item_type:this.state.item_type,
                        item_name: this.state.item_name,
                        item_num:this.state.item_num,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Modal
                    title={record.id?"修改检查项⽬录":'新增检查项⽬录'}
                    visible={visible}
                    confirmLoading={loading}
                    onOk={()=>{

                    }}
                    onCancel={()=>dispatch({type:"inspep/save",payload:{visible:false,record:{}}})}
                >

                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if (nextProps.pages !== this.props.pages) {
            let {item_num,item_name,item_type} = this.state;
            this.props.dispatch({
                type: "inspep/getInspep", payload: {
                    item_num: item_num,
                    item_name :item_name,
                    item_type: item_type,
                    pageNumber: nextProps.pages == 0 ? 1 : nextProps.pages,
                    pageSize: 10,
                },
            });
        }
    }
}


Pages.propTypes = {
    inspep: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ inspep, loading }) => ({ inspep, loading }))(Pages);
